<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
  <script src="./js/OrbitControls.js"></script>  <!--引入OrbitControls.js 三维场景缩放旋转查看-->
  <script src="./js/GLTFLoader.js"></script>
  <!-- <script  type="module">
    import {GLTFLoader} from "./three/examples/jsm/controls/GLTFLoader.js";
  </script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */

    var model = new THREE.Group();
     var loader=new THREE.GLTFLoader();
    loader.load('./static/model/xq.glb',function(gltf){
      console.log('控制台查看属性',gltf);
      console.log('gltf对场景的属性',gltf.scene);
      model.add(gltf.scene);

      scene.add(model); //网格模型添加到场景中

     })
scene.add(model); //网格模型添加到场景中
// 坐标轴
//  var axes =new THREE.AxesHelper(20);
//  scene.add(axes)
    /**
     * 光源设置
     */
    //点光源
    scene.add(new THREE.AmbientLight(0xffffff));
    var point = new THREE.PointLight(0xffffff);
    point=new THREE.DirectionalLight(0xffffff,1);
    point.position.set(100, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 70; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 100, 0); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height);//设置渲染区域尺寸
    renderer.setClearColor(0x000000, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
//     function render() {
//     renderer.render(scene,camera);//执行渲染操作
//     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
// }
// //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
// setInterval("render()",20);

function render() {
        renderer.render(scene,camera);//执行渲染操作
        // mesh.rotateY(0.005);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
// controls.addEventListener('change', render);//监听鼠标、键盘事件
  </script>
</body>
</html>
